<!--
 * @Description: 对称条形图
 * @Author: xjc
 * @Date: 2022-06-21 10:11:04
 * @LastEditTime: 2022-06-21 10:40:34
 * @LastEditors: xjc
-->
<template>
  <div id="bidirectional-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {BidirectionalBar} = G2Plot

onMounted(() => renderBidirectional())

function renderBidirectional() {
  const data = [
    {country: '乌拉圭', '2016年耕地总面积': 13.4, '2016年转基因种植面积': 12.3},
    {country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3},
    {country: '南非', '2016年耕地总面积': 18.4, '2016年转基因种植面积': 8.3},
    {country: '巴基斯坦', '2016年耕地总面积': 34.4, '2016年转基因种植面积': 13.8},
    {country: '阿根廷', '2016年耕地总面积': 44.4, '2016年转基因种植面积': 19.5},
    {country: '巴西', '2016年耕地总面积': 24.4, '2016年转基因种植面积': 18.8},
    {country: '加拿大', '2016年耕地总面积': 54.4, '2016年转基因种植面积': 24.7},
    {country: '中国', '2016年耕地总面积': 104.4, '2016年转基因种植面积': 5.3},
    {country: '美国', '2016年耕地总面积': 165.2, '2016年转基因种植面积': 72.9},
  ]
  const BidirectionalBarPlot = new BidirectionalBar('bidirectional-container', {
    data,
    xField: 'country',
    xAxis: {position: 'bottom'},
    appendPadding: [0, 30],
    interactions: [{type: 'active-region'}],
    yField: ['2016年耕地总面积', '2016年转基因种植面积'],
    tooltip: {
      shared: true,
      showMarkers: false,
    },
    // 开启 label 展示
    label: {
      // 默认居中, 'middle'
      position: 'right',
      // 默认为: 2
      // offset: 4,
    },
  });

  BidirectionalBarPlot.update({ 
    "theme": { 
      "styleSheet": { 
        "brandColor": "#FF4500", 
        "paletteQualitative10": ["#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#B40F0F", "#2FB8FC", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26"], 
        "paletteQualitative20": ["#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#B40F0F", "#2FB8FC", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26", "#946DFF", "#6C3E00", "#6193FF", "#FF988E", "#36BCCB", "#004988", "#FFCF9D", "#CCDC8A", "#8D00A1", "#1CC25E"] 
      } 
    } 
  })
  BidirectionalBarPlot.render()
}
</script>
